import React from 'react';
import { Form, Input, Modal, message } from 'antd';
import Api from 'Utils/api';
import './index.scss';

const FormItem = Form.Item;
const AddForm = Form.create()(
  (props) => {
    const { form, initialValue } = props;
    const { getFieldDecorator } = form;

    return (
      <Form>
        <FormItem
          label="类别:"
        >
          {
            getFieldDecorator('name', {
              initialValue: initialValue ? initialValue.name : '',
            })(
              <Input placeholder="请输入类别" style={{ width: 600 }} />
            )
          }
        </FormItem>
      </Form>
    );
  }
);

class EditAdviceModal extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      visible: false,
      loading: false,
      isAdd: false,
      record: ''
    };
  }

  showModal(record) {
    this.setState({
      visible: true,
      record: record
    }, () => {
      this.form.resetFields();
    });
    if (!record.id) {
      this.setState({ isAdd: true });
    } else {
      this.setState({ isAdd: false });
    }
  }

  close() {
    this.setState({
      loading: false,
      visible: false,
    });
  }
  validation(value) {
    if (!value.name) {
      return false;
    }
    return true;
  }

  handleOk() {
    const { isAdd } = this.state;
    const formValue = this.form.getFieldsValue();
    const currentValue = isAdd ? {} : this.state.record;
    if (!this.validation(formValue)) {
      message.error('请填写完整信息');
      return;
    }
    let newRecord = { ...currentValue, ...formValue };
    const self = this;
    this.setState({ loading: true });
    if (!isAdd) {
      newRecord = { ...currentValue, ...formValue };
      const editApi = new Api({
        method: 'PATCH',
        path: `/directorys/${this.state.record.id}`,
        query: newRecord,
        success: () => {
          this.props.onOk(newRecord);
          self.close();
        },
        error: (msg) => {
          this.setState({ loading: false });
          message.error(msg);
        }
      });
      editApi.run();
    } else {
      const addApi = new Api({
        method: 'POST',
        path: '/directorys',
        data: newRecord,
        success: (json) => {
          newRecord = { ...json };
          this.props.onOk(newRecord);
          self.close();
        },
        error: (msg) => {
          this.setState({ loading: false });
          message.error(msg);
        }
      });
      addApi.run();
    }
  }

  render() {
    const title = this.state.isAdd ? '新增' : '修改';
    return (
      <div>
        <Modal
          title={`${title}类别`}
          visible={this.state.visible}
          onOk={this.handleOk.bind(this)}
          onCancel={() => {
            this.close();
          }}
          confirmLoading={this.state.loading}
          className="small-modal"
        >
          <AddForm
            initialValue={this.state.record ? this.state.record : ''}
            ref={(ref) => { this.form = ref; }}
          />
        </Modal>
      </div>
    );
  }
}

export default EditAdviceModal;
